<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-row>
        <el-col :xs="24" :sm="12">
          <el-button-group>
            <el-button type="primary">分散式</el-button>
            <el-button>集中式</el-button>
          </el-button-group>
        </el-col>
      </el-row>
      <div style="display: flex; justify-content: space-between;">
        <el-form-item>
          <el-select v-model="queryParams.province" placeholder="请选择省份">
            <el-option v-for="province in provinces" :key="province.value" :label="province.label" :value="province.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="queryParams.city" placeholder="请选择城市">
            <el-option v-for="city in cities" :key="city.value" :label="city.label" :value="city.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="queryParams.district" placeholder="请选择区县">
            <el-option v-for="district in districts" :key="district.value" :label="district.label" :value="district.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="roomName" style="flex:1; margin-left: 1px;">
          <el-input v-model="queryParams.roomName" placeholder="搜索：小区名，公寓名，房间号，租客名" clearable size="medium" @keyup.enter.native="handleQuery" style="width: 300px;" />
        </el-form-item>
        <el-form-item style="margin-left: 10px;">
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        </el-form-item>
      </div>
    </el-form>

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部" name="quan"></el-tab-pane>
      <el-tab-pane label="租房分期" name="fen"></el-tab-pane>
      <el-tab-pane label="租约保障" name="zu"></el-tab-pane>
      <el-tab-pane label="欠费提醒" name="qian"></el-tab-pane>
      <el-tab-pane label="收费提醒" name="shou"></el-tab-pane>
      <el-tab-pane label="合同快到期" name="hekuai"></el-tab-pane>
      <el-tab-pane label="合同已到期" name="heyi"></el-tab-pane>
      <el-tab-pane label="装修维护" name="zhangxi"></el-tab-pane>
    </el-tabs>

    <el-row>
      <el-col :span="8" v-for="o in tableData" :offset="5" :key="o.id">
        <el-card :body-style="{ padding: '30px' }">
          <img :src="'http://localhost:9406'+o.imageUrl" class="image" style="width: 300px;height: 300px"/>
          <div style="padding: 14px;">
            <span>房源名称:{{o.name}}</span><br>
            <span>房源状态:{{o.status}}</span><br>
            <div class="bottom clearfix">
              <el-button type="text" class="button" @click="xiang(o)">房源详情</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog title="房源详情" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="房源名称" :label-width="formLabelWidth">
          <el-input v-model="o.name" autocomplete="off" disabled/>
        </el-form-item>
        <el-form-item label="房源楼号" :label-width="formLabelWidth">
          <el-input v-model="o.num" autocomplete="off" disabled/>
        </el-form-item>
        <el-form-item label="单元号" :label-width="formLabelWidth">
          <el-input v-model="o.yuan" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label="门牌号" :label-width="formLabelWidth">
          <el-input v-model="o.pai" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label="户型朝向" :label-width="formLabelWidth">
          <el-input v-model="o.xiang" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label="装修" :label-width="formLabelWidth">
          <el-input v-model="o.zhuang" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label="楼层" :label-width="formLabelWidth">
          <el-input v-model="o.lou" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label="总楼数" :label-width="formLabelWidth">
          <el-input v-model="o.zong" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label="管家" :label-width="formLabelWidth">
          <el-input v-model="o.guan" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label="房产面积" :label-width="formLabelWidth">
          <el-input v-model="o.mian" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label="租金" :label-width="formLabelWidth">
          <el-input v-model="o.money" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label="付款方式 押金" :label-width="formLabelWidth">
          <el-input v-model="o.ya" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label="付款方式 付款" :label-width="formLabelWidth">
          <el-input v-model="o.fu" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label="公共配套" :label-width="formLabelWidth">
          <el-input v-model="o.gong" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label="房间配套" :label-width="formLabelWidth">
          <el-input v-model="o.fang" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label="房间图片" :label-width="formLabelWidth">
           <el-input v-model="o.imageUrl" autocomplete="off"/>
          <img :src="'http://localhost:9406'+o.imageUrl" class="image" style="width: 300px;height: 300px"/>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-input v-model="o.status" autocomplete="off" disabled />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listInfo, getInfo, delInfo, addInfo, updateInfo } from "@/api/fangyuan/fangtai";
export default {
  name: "fangtai",
  data() {
    return {
      // 显示搜索条件
      showSearch: true,
      activeName: 'quan',
      // 查询参数
      queryParams:{
        provinces:null,
        city:null,
        district:null,
        roomName:null,
      },
      tableData: [],
      dialogFormVisible: false,
      form: {},
      formLabelWidth: "120px",
      o: {},
    }
  },
  created() {
    this.initData();
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  /** 搜索按钮操作 */
  handleQuery() {
    this.initData();
  },
    initData(){
      listInfo().then(response => {
        this.tableData = response;
      });

    },
    xiang(o){
      this.dialogFormVisible=true;
      this.o=o;
    }
  }
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
